<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/css/plugins/layui/css/layui.css}">
  <style>
    body {
      padding: 10px;
    }
  </style>
</head>
<body>
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<table class="layui-hide" id="test"></table>

<script th:src="@{/js/plugins/layui/layui.js}"></script>
<script>
  layui.use(function(){
    var treeTable = layui.treeTable;
    var layer = layui.layer;
    var dropdown = layui.dropdown;
    // 渲染
    var inst = treeTable.render({
      elem: '#test',
      url: '/permission/treelist', // 此处为静态模拟数据，实际使用时需换成真实接口
      tree: {
      },
      maxHeight: '501px',
      toolbar: '#toolbarDemo',
      cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
          {field:'name',  title: '权限名称', width: 180, fixed: 'left',templet: function(d){
              return d.menuName;
            }},
          {field:'menuType',  title: '权限类型'},
          {field:'url',  title: '请求地址'},
          {field:'perms',  title: '权限标识'},
          {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
        ]
      ],
      page: true
    });
  });
</script>
</body>
</html>